<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <th:block th:insert="~{include :: header('修改课程')}" />
    <th:block th:insert="~{include :: datetimepicker-css}" />
    <th:block th:insert="~{include :: summernote-css}" />
    <th:block th:insert="~{include :: select2-css}" />
 </head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-3">
    <!-- Main content -->
    <div class="card mt-2">
        <div class="card-header border-0">
            <h3 class="card-title" th:text="${course.courseId > 0?'修改课程':'添加课程'}"></h3>
            <div class="card-tools"></div>
        </div>
        <div class="card-body">
    <form class="form-horizontal m" id="form-course-edit" th:object="${course}">
        <input id="teacherIdArr" name="teacherIdArr"  type="hidden"/>
        <input id="courseId" name="courseId" th:field="*{courseId}" type="hidden">
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">类型</label>
            <div class="col-sm-6 pt-2">
                <label class="mr-4">
                    <input type="radio" onchange="changeSellType(this)" value="COURSE" name="sellType" th:checked="${course.sellType=='COURSE'}"> 课程
                </label>
                <label class="mr-4">
                    <input type="radio" onchange="changeSellType(this)" value="LIVE" name="sellType" th:checked="${course.sellType=='LIVE'}"> 直播
                </label>
                <label class="mr-4">
                    <input type="radio" onchange="changeSellType(this)" value="PACKAGE" name="sellType" th:checked="${course.sellType=='PACKAGE'}"> 套餐
                </label>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">分类</label>
            <div class="col-sm-2">
                <div class="input-group">
                    <input id="categoryId" name="categoryId" type="hidden" th:value="*{categoryId}"/>
                    <input class="form-control" type="text" placeholder="请选择分类" id="categoryName" readonly="readonly" th:value="*{categoryName}">
                </div>
            </div>
            <span class="form-text text-red">请选择所属分类</span>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">标题</label>
            <div class="col-sm-6">
                <input id="courseName" name="courseName" th:field="*{courseName}" placeholder="请输入课程名称/标题" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">简介</label>
            <div class="col-sm-9">
                <textarea id="intro" name="intro" style="min-height: 100px" placeholder="请简单描述一下课程" th:text="*{intro}" class="form-control"></textarea>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">封面</label>
            <div class="col-sm-4">
                <input id="cover" name="cover" placeholder="请输入封面地址或上传" th:value="*{cover}" class="form-control" type="text">
            </div>
            <div class="col-sm-4">
                <label for="cover-upload" class="btn btn-danger"><i class="fa fa-image"></i> 上传图像</label>
                <label class="btn btn-default" id="view-cover"><i class="fa fa-image"></i> 预览</label>
                <input type="file" onchange="ImgUpdate()" style="display: none" name="cover-upload" id="cover-upload" accept="image/*"/>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">详情</label>
            <div class="col-sm-9">
                <input id="content" th:value="*{context}" name="context" type="hidden">
                <div id="editor" class="summernote" th:text="*{context}"></div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">主讲教师</label>
            <div class="col-sm-6">
                <select id="teacherIds" class="form-control select2-multiple" multiple>
                    <option th:each="dict:${teacherList}" th:value="${dict.id}" th:text="${dict.name}+' ('+${dict.mobile}+')'"></option>
                </select>
            </div>
            <span class="form-text text-red">主讲教师可以多选</span>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">课程归属</label>
            <div class="col-sm-3">
                <select id="userId" name="userId" class="form-control m-b" th:with="type=${teacherList}" required>
                    <option value="0">无归属</option>
                    <option th:each="dict : ${type}" th:text="${dict.name}+' ('+${dict.mobile}+')'" th:value="${dict.userId}" th:selected="${dict.userId == course.userId}"></option>
                </select>
            </div>
            <span class="form-text text-red">课程的提成将结算到此账户</span>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">总课时</label>
            <div class="col-sm-2">
                <input name="lessonNum"  th:value="*{lessonNum}" class="form-control" type="text" required>
            </div>
            <label class="col-sm-2 col-form-label is-required text-sm-right">有效期</label>
            <div class="col-sm-2">
                <input name="expireDate" class="form-control"  th:value="*{expireDate}" type="text" required>
            </div>
        </div>

        <div id="liveDisplay" style="display: none">
            <div class="form-group row">
                <label class="col-sm-2 col-form-label text-sm-right">直播开始时间</label>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <input name="liveBeginTime" autocomplete="off" th:value="${#strings.replace(course.liveBeginTime,'T',' ')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-2 col-form-label text-sm-right">直播结束时间</label>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <input name="liveEndTime" autocomplete="off" th:value="${#strings.replace(course.liveEndTime,'T',' ')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">售价</label>
            <div class="col-sm-2">
                <input name="price" th:value="*{price/100}" class="form-control" value="0"  type="text" required>
            </div>
            <label class="col-sm-2 col-form-label is-required text-sm-right">原价</label>
            <div class="col-sm-2">
                <input name="sourcePrice" th:value="*{sourcePrice/100}" class="form-control" value="0" type="text" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">销售量</label>
            <div class="col-sm-2">
                <input name="buyCount" th:value="*{buyCount}" class="form-control" value="0" type="text" required>
            </div>
            <label class="col-sm-2 col-form-label is-required text-sm-right">浏览量</label>
            <div class="col-sm-2">
                <input name="viewCount" th:value="*{viewCount}" class="form-control" value="0" type="text" required>
            </div>
        </div>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label is-required text-sm-right">属性</label>
            <div class="col-sm-2 pt-2">
                <label for="isElite"><input type="checkbox" value="1" name="isElite" id="isElite" th:checked="*{isElite==1}"> 推荐</label>
                &nbsp;&nbsp;&nbsp;
                <label for="isTop"><input type="checkbox" value="1" name="isTop" id="isTop" th:checked="*{isTop==1}"> 固顶</label>
            </div>
            <label class="col-sm-2 col-form-label text-sm-right">关联书籍</label>
            <div class="col-sm-2">
                <input name="bookId" th:value="*{bookId}" class="form-control" placeholder="请输入关联的书籍id" type="text">
            </div>
            <span class="form-text text-red">请输入需要关联的书籍id</span>
        </div>
        <div class="row">
            <label class="col-sm-2"></label>
                <div class="col-sm-10">
                <button type="button" class="btn btn-primary" onclick="submitCourse()"><i class="fa fa-check"></i>保 存</button>&nbsp;
                <button type="button" class="btn btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
            </div>
        </div>
    </form>
        </div>
    </div>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: datetimepicker-js}" />
<th:block th:insert="~{include :: summernote-js}" />
<th:block th:insert="~{include :: select2-js}" />
<script th:inline="javascript">
    var prefix = "/course";
    var prefixCategory = "/category";
    var channelId = [[${course.channelId}]];
    var sellType = [[${course.sellType}]];

    $(function() {
        var arr = JSON.parse('[[${teacherIds}]]');
        $('#teacherIds').val(arr).trigger("change").select2({
            placeholder: "请选择主讲教师",
            allowClear: true
        });

        //初始化类型
        if(sellType==="LIVE"){
            $("#liveDisplay").show();
        }else{
            $("#liveDisplay").hide();
        }

        $("input[name='liveBeginTime']").datetimepicker({
            format: 'Y-m-d H:i:00',
            formatDate: 'Y-m-d',
            formatTime: 'H:i:00',
            step: 5
        });

        $("input[name='liveEndTime']").datetimepicker({
            format: 'Y-m-d H:i:00',
            formatDate: 'Y-m-d',
            formatTime: 'H:i:00',
            step: 5
        });

        $("input[name='endTime']").datetimepicker({
            format: 'Y-m-d H:i:00',
            formatDate: 'Y-m-d',
            formatTime: 'H:i:00',
            step: 5
        });

        /*分类-新增-选择父部门树*/
        $('#categoryName').click(function () {
            var options = {
                title: null,
                width: "380px",
                url: prefixCategory + "/select.html?categoryId=" + $("#categoryId").val() + "&channelId=" + channelId,
                callBack: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    setCategory(body.find('#categoryId').val(), body.find('#categoryName').val())
                    layer.close(index);
                }
            };
            $.modal.openOptions(options);
        });

        $('.summernote').summernote({
            placeholder: '请输入课程的详细介绍，支持html语法',
            height : 192,
            lang : 'zh-CN',
            followingToolbar: false,
            callbacks: {
                onImageUpload: function (files) {
                    sendFile(files[0], this);
                }
            }
        });
        var content = $("#content").val();
        $('#editor').summernote('code', content);

        $('#view-cover').click(function () {
            var imgSrc = $('#cover').val();
            if (imgSrc.length < 1) {
                layer.msg('图片地址不存在！');
            } else {
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim',
                    title: false,
                    area: ['60%', '500px'],
                    content: '<img src="' + imgSrc + '" />'
                });
            }
        });
    });
    //下拉框选中事件
    function setCategory(id, name) {
        $("#categoryId").val(id);
        $("#categoryName").val(name);
    }
    //下拉框选中后执行事件
    function changeSellType(obj) {
        if (obj.value === 'LIVE') {
            $("#liveDisplay").show();
        } else {
            $("#liveDisplay").hide();
        }
    }
    //图片上传
    function ImgUpdate() {
        var file = $('#cover-upload')[0].files[0];
        var formData = new FormData();
        formData.append("file",file);
        $.ajax({
            url: "/upload/image.json",
            data: formData,
            type: "post",
            processData: false,
            contentType: false,
            dataType:"json",
            mimeType:"multipart/form-data",
            success: function(result) {
                if(result.code === 0){
                    $("#cover").val(result.data.src);
                    layer.msg('上传成功', {icon: 1});
                }else{
                    layer.msg('上传失败', {icon: 2});
                }
            }
        })
    }
    // 富文本上传文件
    function sendFile(file, obj) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            type: "POST",
            url: "/upload/image.json",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function(result) {
                if (result.code === 0) {
                    $(obj).summernote('editor.insertImage', result.data.src, result.data.title);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function(error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }

    //修改保存
    function submitCourse() {
        var sHTML = $('.summernote').summernote('code');
        $("#content").val(sHTML);
        var ids = $.form.selectSelects("teacherIds");
        $("#teacherIdArr").val(ids);
        var categoryId = $('#categoryId').val();
        if (categoryId === '' || categoryId === '0') {
            return layer.msg('请先选择所属分类！', {icon: 2});
        }
        if ($('#courseName').val().length < 3) {
            return layer.msg('请输入标题，且必需大于3个字符！', {icon: 2});
        }
        if ($('#intro').val().length < 5) {
            return layer.msg('请输入简介，且必需大于5个字符！', {icon: 2});
        }
        $.modal.loading();
        var data = $("#form-course-edit").serializeArray();
        $.post(prefix + "/save.json", data, function (result) {
            if (result.code === 0) {
                $.operate.successTabCallback(result);
            } else {
                $.modal.msgError(result.msg);
            }
        });
    }
</script>
</body>
</html>